<template>
    <Table border :columns="classColumns" :data="classData" :span-method="handleSpan">
      <!-- 序号 -->
      <template slot-scope="{ index }" slot="index">
        <strong>{{ index + 1 }}</strong>
      </template>
      <!-- 班次名称 -->
      <template slot-scope="{ row, index }" slot="className">
        <span v-if="index !== editingRowIndex">{{ row.className }}</span>
        <Input v-else v-model="editedRow.className" @on-blur="saveEdit" ref="editInput"></Input>
        <span @click="addColInfo">
          <Icon type="md-add"></Icon>
        </span>
      </template>
      <!-- 详情操作列 -->
      <template slot-scope="{ row, index }" slot="detailAction">
        <div>
          <Icon size="30" type="ios-create"></Icon>
          <Icon size="30" type="md-close"></Icon>
        </div>
      </template>
      <!-- 班次操作列 -->
      <template slot-scope="{ row, index }" slot="action">
        <Button v-if="index !== editingRowIndex" type="primary" size="small" style="margin-right: 5px" @click="startEdit(row, index)">编辑</Button>
        <Button v-else type="primary" size="small" style="margin-right: 5px" @click="saveEdit">保存</Button>
        <Button type="error" size="small" @click="remove(index)">删除</Button>
      </template>
    </Table>
  </template>
  
  <script>
  export default {
    data() {
      return {
        classColumns: [/* columns definition */],
        classData: [/* your initial data */],
        editingRowIndex: -1,
        editedRow: {} // Store the edited row data
      };
    },
    methods: {
      startEdit(row, index) {
        this.editingRowIndex = index;
        this.editedRow = Object.assign({}, row); // Make a copy of the row data
        // Focus on the input element after the edit starts
        this.$nextTick(() => {
          this.$refs.editInput.focus();
        });
      },
      saveEdit() {
        // Update the original row with edited data
        this.classData.splice(this.editingRowIndex, 1, this.editedRow);
        this.editingRowIndex = -1; // Reset editing index
      },
      remove(index) {
        this.classData.splice(index, 1);
      }
    }
  };
  </script>